// ** React Imports
import { useContext, useEffect, useRef } from 'react'
import * as echarts from 'echarts'

export default () => {
  const charRef = useRef(null)

  useEffect(() => {
    initChart()
  }, [])

  const initChart = () => {
    const chart = echarts.init(charRef.current)
    chart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
      },
      legend: {
        data: ['挤出机', '喷码机', '牵引机', '切割机'],
        textStyle: {
          color: '#fff',
          fontSize: 20,
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: { lineStyle: { color: '#95f3f5' } },
        // prettier-ignore
        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'],
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} W',
        },
        axisPointer: {
          snap: true,
        },
        axisLine: { lineStyle: { color: '#95f3f5' } },
      },
      visualMap: {
        show: false,
        dimension: 0,
        pieces: [
          {
            lte: 6,
            color: 'green',
          },
          {
            gt: 6,
            lte: 8,
            color: 'red',
          },
          {
            gt: 8,
            lte: 14,
            color: 'green',
          },
          {
            gt: 14,
            lte: 17,
            color: 'red',
          },
          {
            gt: 17,
            color: 'green',
          },
        ],
      },
      series: [
        {
          name: '挤出机',
          type: 'line',
          smooth: true,
          // prettier-ignore
          data: [100, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
          markArea: {
            itemStyle: {
              color: 'rgba(255, 173, 177, 0.4)',
            },
            data: [
              [
                {
                  name: '晨高峰',
                  xAxis: '07:30',
                },
                {
                  xAxis: '10:00',
                },
              ],
              [
                {
                  name: '晚高峰',
                  xAxis: '17:30',
                },
                {
                  xAxis: '21:15',
                },
              ],
            ],
          },
        },
        {
          name: '喷码机',
          type: 'line',
          smooth: true,
          // prettier-ignore
          data: [200, 180, 550, 460, 270, 600, 750, 500, 400, 390, 380, 390, 400, 500, 600, 750, 700, 700, 600, 400],
          markArea: {
            itemStyle: {
              color: 'rgba(255, 173, 177, 0.4)',
            },
          },
        },
        {
          name: '牵引机',
          type: 'line',
          smooth: true,
          // prettier-ignore
          data: [230, 180, 550, 460, 270, 600, 650, 500, 400, 390, 380, 390, 400, 500, 320, 550, 700, 700, 600, 400],
          markArea: {
            itemStyle: {
              color: 'rgba(255, 173, 177, 0.4)',
            },
          },
        },
        {
          name: '切割机',
          type: 'line',
          smooth: true,
          // prettier-ignore
          data: [240, 280, 180, 260, 270, 500, 420, 300, 400, 300, 230, 300, 450, 500, 600,680, 700, 700, 600, 400],
          markArea: {
            itemStyle: {
              color: 'rgba(255, 173, 177, 0.4)',
            },
          },
        },
      ],
    })
  }
  return (
    <div className="device-center-one" style={{ marginTop: '30px' }}>
      <div className="box-title font-size-24">一天用电分布</div>
      <div
        className="box-content center-one-content"
        style={{ height: '500px' }}
      >
        <div
          className="char"
          ref={charRef}
          style={{ height: '100%', width: '100%' }}
        ></div>
      </div>
    </div>
  )
}
